/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 21:09:19
 * @LastEditTime: 2022-05-03 21:16:10
 * @LastEditors: wangjq4214
 */
import { Carousel } from '@arco-design/web-react';
import bannerImage from '@/assets/login-banner.png';
import styles from './banner.module.less';

const carouselItem = [
  {
    slogan: '虚拟化计算和存储集群资源调度管理系统',
    subSlogan: '提供协作集群的管理调度功能',
    image: bannerImage,
  },
];

const Banner = () => {
  return (
    <div
      className={`${styles['banner']} flex items-center justify-center w-550px`}
    >
      <div className="flex-1 h-full">
        <Carousel className="h-full" animation-name="fade">
          {carouselItem.map((item) => (
            <div
              key="item.slogan"
              className="flex flex-col items-center justify-center h-full"
            >
              <div className="text-$color-fill-1 text-20px font-medium leading-28px">
                {item.slogan}
              </div>
              <div className="text-$color-text-3 mt-8px text-14px leading-22px">
                {item.subSlogan}
              </div>
              <img src={item.image} className="w-320px mt-30px" />
            </div>
          ))}
        </Carousel>
      </div>
    </div>
  );
};

export default Banner;
